<template>
  <!-- 考勤卡绑定 -->
  <div class="time-card">
    <van-tabs v-model="active" color="#6385D7">
      <!-- 学员考勤卡tab -->
      <van-tab title="学员考勤卡" style="background-color:#F7F7F7;">
        <!-- 搜索框 -->
        <div style>
          <van-search
            v-model="value"
            shape="round"
            background="#F7F7F7"
            placeholder="输入学员姓名/家长电话搜索"
            style="padding:20px 67px;"
          ></van-search>
        </div>
        <!-- 下拉菜单 -->
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1" />
          <van-dropdown-item v-model="value2" :options="option2" />
          <van-dropdown-item v-model="value3" :options="option3" />
        </van-dropdown-menu>
        <!-- 考勤卡列表 -->
        <div class="row-space-between list-item">
          <div class="column-space-around" style="height:51px;">
            <P style="font-size: 14px;margin:0;">
              学员姓名1
              <van-tag plain color="#4378BE" style="margin-left:14px;">未绑定</van-tag>
              <!-- <van-tag plain color="#F40404">已挂失</van-tag> -->
            </P>
            <P style="color: rgba(16, 16, 16, 0.65);font-size: 12px;margin:0;">18219112000</P>
          </div>
          <van-button size="mini" color="#59BDC3" plain @click="show = true">绑卡信息</van-button>
        </div>
        <div class="row-space-between list-item">
          <div class="column-space-around" style="height:51px;">
            <P style="font-size: 14px;margin:0;">
              学员姓名2
              <!-- <van-tag plain color="#4378BE" style="margin-left:14px;">未绑定</van-tag> -->
              <van-tag plain color="#F40404" style="margin-left:14px;">已挂失</van-tag>
            </P>
            <P style="color: rgba(16, 16, 16, 0.65);font-size: 12px;margin:0;">18219112000</P>
          </div>
          <van-button size="mini" color="#59BDC3" plain @click="show = true">绑卡信息</van-button>
        </div>
      </van-tab>
      <van-tab title="教职工考勤卡">
        <!-- 教职工考勤卡tab -->
        <div style>
          <van-search
            v-model="value"
            shape="round"
            background="#F7F7F7"
            placeholder="输入教职工姓名/电话号码搜索"
            style="padding:20px 67px;"
          ></van-search>
        </div>
        <!-- 下拉菜单 -->
        <van-dropdown-menu>
          <van-dropdown-item v-model="value4" :options="option4" />
          <van-dropdown-item v-model="value5" :options="option5" />
        </van-dropdown-menu>
        <!-- 考勤卡列表 -->
        <div class="row-space-between list-item">
          <div class="column-space-around" style="height:51px;">
            <P style="font-size: 14px;margin:0;">
              教职工姓名1
              <van-tag plain color="#4378BE" style="margin-left:14px;">未绑定</van-tag>
              <!-- <van-tag plain color="#F40404">已挂失</van-tag> -->
            </P>
            <P style="color: rgba(16, 16, 16, 0.65);font-size: 12px;margin:0;">18219112000</P>
          </div>
          <van-button size="mini" color="#59BDC3" plain @click="show = true">绑卡信息</van-button>
        </div>
        <div class="row-space-between list-item">
          <div class="column-space-around" style="height:51px;">
            <P style="font-size: 14px;margin:0;">
              教职工姓名2
              <!-- <van-tag plain color="#4378BE" style="margin-left:14px;">未绑定</van-tag> -->
              <van-tag plain color="#F40404" style="margin-left:14px;">已挂失</van-tag>
            </P>
            <P style="color: rgba(16, 16, 16, 0.65);font-size: 12px;margin:0;">18219112000</P>
          </div>
          <van-button size="mini" color="#59BDC3" plain @click="show = true">绑卡信息</van-button>
        </div>
      </van-tab>
    </van-tabs>
    <van-popup v-model="show" style="border-radius:4px;width:80%;text-align:center;">
      <p>绑卡信息</p>
      <van-image width="178" height="178" src="../assets/code.png" />
      <p style="font-size: 14px;">名称姓名</p>
      <p style="color: rgba(16, 16, 16, 0.45);font-size: 12px;">识别器扫描二维码->扫描空卡->完成绑定</p>
      <van-button size="large" @click="bindCard">关闭</van-button>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      active: 0,
      value: "",
      // 下拉菜单
      value1: 0,
      value2: 0,
      value3: 0,
      value4: 0,
      value5: 0,
      option1: [
        { text: "全部", value: 0 },
        { text: "未绑定", value: 1 },
        { text: "已挂失", value: 2 }
      ],
      option2: [
        { text: "年级", value: 0 },
        { text: "一年级", value: 1 },
        { text: "二年级", value: 2 }
      ],
      option3: [
        { text: "班级", value: 0 },
        { text: "一班", value: 1 },
        { text: "二班", value: 2 }
      ],
      option4: [
        { text: "全部", value: 0 },
        { text: "未绑定", value: 1 },
        { text: "已挂失", value: 2 }
      ],
      option5: [
        { text: "职称", value: 0 },
        { text: "中级", value: 1 },
        { text: "高级", value: 2 }
      ],
      show: false
    };
  },
  methods: {
    bindCard() {
      this.show = false;
      Toast.success('绑定成功');
      // websocket实现长连接
    }
  }
};
</script>

<style lang="scss" scoped>
.time-card {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
}
.list-item {
  height: 70px;
  padding: 0 19px;
  align-items: center;
  background-color: #fff;
  margin-top: 4px;
}
.van-search__content--round {
  border: 1px solid rgba(187, 187, 187, 1);
}
</style>